import { useEffect, useState } from 'react'
import {
    type ColumnDef,
    type RowData,
    flexRender,
    getCoreRowModel,
    getExpandedRowModel,
    useReactTable,
} from '@tanstack/react-table'
import {
    Table,
    TableBody,
    TableCell,
    TableRow,
} from '@/components/ui/table'
import { TreeItem, SelectedItem } from './schema'

declare module '@tanstack/react-table' {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface ColumnMeta<TData extends RowData, TValue> {
        className: string
    }
}

interface DataTableProps {
    columns: ColumnDef<TreeItem>[]
    data: TreeItem[]
    onValueChange: (selectedItems: SelectedItem) => void
    defaultSelected: SelectedItem
    enableSubSelection?: boolean
    enableMultiRowSelection?: boolean
}

export function TreeSelectTable({ columns, data, onValueChange, defaultSelected = {}, enableSubSelection = true, enableMultiRowSelection = true }: DataTableProps) {
    const [rowSelection, setRowSelection] = useState<SelectedItem>(defaultSelected)

    const table = useReactTable({
        data,
        columns,
        state: {
            rowSelection,
        },
        initialState: {
            expanded: true,
        },
        getRowId: row => row.value,
        enableRowSelection: true,
        enableMultiRowSelection: enableMultiRowSelection,
        enableSubRowSelection: enableSubSelection,
        getSubRows: (row) => row.children, // return the children array as sub-rows
        getExpandedRowModel: getExpandedRowModel(),
        onRowSelectionChange: setRowSelection,
        getCoreRowModel: getCoreRowModel(),
    })

    useEffect(() => {
        onValueChange(rowSelection)
        // 行选择状态变更
    }, [rowSelection, onValueChange])

    return (
        <div className='space-y-4'>
            {/* <DataTableToolbar table={table} /> */}
            <div className='max-h-[300px] overflow-auto rounded-md border'>
                <Table className=''>
                    <TableBody>
                        {table.getRowModel().rows?.length ? (
                            table.getRowModel().rows.map((row) => (
                                <TableRow
                                    key={row.id}
                                    data-state={row.getIsSelected() && 'selected'}
                                    className='group/row'
                                >
                                    {row.getVisibleCells().map((cell) => (
                                        <TableCell
                                            key={cell.id}
                                            className={cell.column.columnDef.meta?.className ?? ''}
                                        >
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext()
                                            )}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell
                                    colSpan={columns.length}
                                    className='h-24 text-center'
                                >
                                    No results.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
            {/* <DataTablePagination table={table} /> */}
        </div>
    )
}
